<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../js/jquery.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
  <title>智慧校园选课系统-栏目管理</title>
  <style>
    .login {
      width: 300px;
      padding: 10px 0 0 20px;
    }
    .btns {
      padding: 10px 0 0 20px;
    }
    .content {
      padding: 10px 10px 10px 20px;
    }
  </style>
  <script>
    var qs = Qs
    $(function() {
      $('#btn_login').click(function(event) {
        var loginData = {
          username: $('#form_username').val(),
          password: $('#form_password').val()
        }
        event.preventDefault()
        $.ajax({
          url: 'http://47.94.46.113:7788/user/login',
          method: 'post',
          data: JSON.stringify(loginData),
          headers: {
            'Content-Type': 'application/json'
          },
          success: function(res) {
            $.ajaxSetup({
              headers: {
                'Authorization': res.data.token
              }
            })
            $('.login').html('<h3>欢迎登陆！</h3>')
            findAllParentCate()
          },
          error: function(res) {
            alert(res.message)
          }
        })
        
      })
      // 重载数据
      function reloadData() {
        $.get('http://47.94.46.113:7788/category/findAll',function(res) {
          $('tbody').empty()
          res.data.forEach(function(item) {
            $(`
              <tr>
                <td><input type="checkbox" value="`+item.id+`"></td>
                <td>`+item.no+`</td>
                <td id="tab_name">`+item.name+`</td>
                <td id="tab_parId">`+item.parentId+`</td>
                <td id="tab_des">`+item.description+`</td>
                <td>
                  <button id="`+item.id+`" type="button" class="btn btn-link btn_del">删除</button>
                  <button id="`+item.id+`" type="button" class="btn btn-link btn_edit">修改</button>
                </td>
              </tr>
            `).appendTo('tbody')
          })
        })
      }
      // 加载按钮
      $('#btn_load').click(reloadData)
      // 新增按钮
      $('#btn_add').click(function() {
        $('#modalLabel').text('新增栏目信息')
        $('#form_id').val(null),
        $('#form_name').val(null),
        $('#form_parId').val(null),
        $('#form_des').val(null)

        $('#modal').modal('show')
      })
      // 查询所有父栏目信息
      function findAllParentCate() {
        $.get('http://47.94.46.113:7788/category/findAll',function(res) {
          var parentCate = res.data.filter(function(item) {
            return item.parentId === null
          })
          $('#form_parId').empty()
          parentCate.forEach(function(item) {
            $(`
              <option value="`+item.id+`">`+item.name+`</option>
            `).appendTo('#form_parId')
          })
        })
      }
      // 保存按钮
      $('#btn_save').click(function() {
        var saveData
        if($('#form_id').val()) {
          saveData = {
            id: $('#form_id').val(),
            name: $('#form_name').val(),
            parentId: $('#form_parId').val(),
            description: $('#form_des').val()
          }
        } else {
          saveData = {
            name: $('#form_name').val(),
            parentId: $('#form_parId').val(),
            description: $('#form_des').val()
          }
        }
        
        $.ajax({
          url: 'http://47.94.46.113:7788/category/saveOrUpdate',
          method: 'post',
          data: qs.stringify(saveData),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: function(res) {
            reloadData()
            $('#modal').modal('hide')
            alert(res.message)
          }
        })
      })
      // 删除修改按钮
      $('tbody').on('click','.btn-link',function() {
        var id = $(this).attr('id')
        if($(this).text() == '删除') {
          var result = confirm('是否确认删除？')
          if(result){
            $.get('http://47.94.46.113:7788/category/deleteById',{id:id},function(res) {
              reloadData()
              alert(res.message)
            })
          }
        } else if($(this).text() == '修改') {
          var name = $(this).closest('tr').find('#tab_name').text()
          var description = $(this).closest('tr').find('#tab_des').text()
          var parentId = $(this).closest('tr').find('#tab_parId').text()
          $('#form_id').val(id)
          $('#form_name').val(name)
          $('#form_parId').val(parentId)
          $('#form_des').val(description)
          $('#modalLabel').text('修改栏目信息')
          $('#modal').modal('show')
        }
      })
    })
  </script>
</head>
<body>
  <div class="login">
    <form>
      <div class="form-group">
        <label for="form_username">用户名</label>
        <input type="email" class="form-control" id="form_username">
      </div>
      <div class="form-group">
        <label for="form_password">密码</label>
        <input type="password" class="form-control" id="form_password">
      </div>
      <button id="btn_login" type="submit" class="btn btn-primary">登录</button>
    </form>
  </div>
  <div class="btns">
    <button id="btn_load" type="button" class="btn btn-primary">加载数据</button>
    <button id="btn_add" type="button" class="btn btn-primary">新增</button>
  </div>
  <!-- 表格 -->
  <div class="content">
    <table class="table">
      <thead class="thead-light">
        <tr>
          <th scope="col"><input type="checkbox"></th>
          <th scope="col">序号</th>
          <th scope="col">栏目名称</th>
          <th scope="col">父栏目Id</th>
          <th scope="col">栏目描述</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        
      </tbody>
    </table>
  </div>
  <!-- 模态框 -->
  <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalLabel">新增栏目信息</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <input id="form_id" type="text" style="display: none;">
            <div class="form-group row">
              <label for="form_name" class="col-sm-4 col-form-label">栏目名称</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="form_name">
              </div>
            </div>
            <div class="form-group row">
              <label for="form_parId" class="col-sm-4 col-form-label">所属栏目</label>
              <div class="col-sm-8">
                <select id="form_parId" class="form-control">
                  
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label for="form_des" class="col-sm-4 col-form-label">栏目描述</label>
              <div class="col-sm-8">
                <textarea class="form-control" id="form_des"></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button id="btn_save" type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>